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Who Are You? 







• Basic shader concepts 

• Distortion Example 

• Atlas Walk Example 

• Environment Blend Example 


These concepts can be used in shader code and in node-based editors 


Basic Shader Concepts 


What is a shader? 

What can a shader do? 


Data Types 


What Is A Shader 


Code that controls the color of each pixel on the screen 
Usually runs on the graphics processor 


Shaders Today 


Game engines using advanced PBR lighting and rendering 
Lighting model is more locked down 

Shaders now feed the G buffer - color, normal, roughness, metallic 
Most engines have a built-in shader editor 
Shaders control material properties 


Shaders Can Do Lots of Things 


Base Color 


Reflectance 


Surface Normal 


Diffuse Light 


Shadows 


Ambient Occlusion 


Metallicity 


Roughness 


Ambient Light 


Light Reflections 


Environment Reflections 


Shaders Can Do Lots of Things 
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Shaders Can Do Lots of Things 
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Shaders Can Do Lots of Things 
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Shaders Can Do Lots of Things 


Surface Properties 

Jr • Base Color x- 

• Reflectance % 

• Surface Normal B 

• Metallicity J 

Roughness f 



Light Properties 

Diffuse Light 
Light Reflections 
Shadows 

Ambient Occlusion 
Environment Reflections 


Ambient Light 



Data Types 


float 

float2 

float3 

float4 

1 value 

• 2 values 

• 3 values 

• 4 values 


• UV coords 

• vectors 

• vectors with W 



• colors 

• colors with 




alpha 












Texture Map & UV Coordinates 
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Basic Shader 
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BasicShaders 
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Multiply Scales UV Coordinates 
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Multiply Scales UV Coordinates 
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Add 
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Add Scrolls UV Coordinates 
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Add Scrolls UV Coordinates 
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BasicShaders 
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Control Speed With Multiply 
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Control Speed With Multiply 
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Noise Scrolls & Adds to UVs 
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BasicShaders 
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Noise Scrolls & Adds to UVs 
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BasicShaders 
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More Complex Distortion 
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More Complex Distortion 
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Distortion Coordinates Shader Code 


float2 distortedUVs(float2 originalUVs, float distortionStrength, ) 

{ 

float2 distortionCoordl = (float2(0.34, 0.12) * time) + originalUVs; 
float2 distortionCoord2 = (float2(0.13, 0.26) * time) + originalUVs; 
float2 distortionl = tex2D(DistortionTextureSampler, distortionCoordl ).xy; 
float2 distortion2 = tex2D(DistortionTextureSampler, distortionCoord2).xy; 
return (distortionl + distortion2) * distortionStrength; 


Atlas Walk Example 
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Atlas Walk Example 
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Atlas Texture 



Sample the Atlas 
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Scale Atlas to One Frame 
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AtlasWalk2 
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AtlasWalk2 
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AtlasWalk2 



•> Base Color 
O Metallic 
O Specular 
O Roughness 
•> Emissive Color 


O 



0» O Normal 

O World Position Offset 


O Ambient Occlusion 


O Pixel Depth Offset 



Floor 



O' O' 




Floor 



O' O' 






AtlasWalk2 
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AtlasWalk2 
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AtlasWalk2 
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Atlas Walk Shader Code 


float2 atlasWalkUVs(float2 dimensions, float2 uvCoords, float fps, float time) 

{ 

float steppingTime = floor(time * fps); 
float jumpingY = floor(steppingTime / dimensions.y); 
float2 newUVs = float2(steppingTime, jumpingY) + uvCoords; 
return frac(newUVs * (1/dimensions)); 


Environment Blending Example 



Environment Blending Example 



Need to Mix Textures 
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Need to Mix Textures 
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Need to Mix Textures 
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Transform & Mask 
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Ad ust the Mask 
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Mix Textures With the Mask 
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Final Shader 
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Environment Blend Shader Code 

float environmentMask(float3 worldSpaceNormal) 

{ 


float worldSpaceY = saturate(worldSpaceNormal.y + 0.2); 
float sharpenedMask = saturate(((worldSpaceY - 0.5) * 10) + 0.5); 


return sharpenedMask; 



Study what other games are doing 
Grab a book 

Google and YouTube Search 

Download Unreal or use ShaderFX in Max or Maya 


Write shaders! 


Thanks! 


